<template>
    <div class="tabbar-item-container">
        <div class="tabbar-item-icon">
            <img :src="icon">
        </div>
        <div class="tabbar-item-title">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  props:{
      icon:{
          type:String,
          required:true,
      }
  }
}
</script>

<style scoped>
.tabbar-item-container{
    width:50px;
    height:100%;
    /* border:1px solid lightblue; */
    display: inline-flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.tabbar-item-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.tabbar-item-icon img{
    width:1.8rem;
    height:1.8rem;
}
.tabbar-item-title{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size:0.85rem;
}
</style>